{% extends 'base/base.html' %}
{% load static %}
{% block title %}视频详情{% endblock %}
{% block header %}
<header id="header">
  <div class="mw1200 header-contain clearfix">
    <!-- logo start -->
    <h1 class="logo">
      <a href="javascript:void(0);" class="logo-title">Python</a>
    </h1>
    <!-- logo end -->
    <!-- nav start -->
    <nav class="nav">
      <ul class="menu">
        <li><a href="{% url "course:index" %}">课件包</a></li>
      </ul>
    </nav>
    <!-- nav end -->
    <!-- login start -->
      <div class="login-box">
          {% if user.is_authenticated %}
              <div class="author">
                    <i class="PyWhich py-user"></i>
                    <span>{{ user.username }}</span>
                    <ul class="author-menu">
                        <li><a href="{% url 'myadmin:index' %}">后台管理</a></li>
                        <li><a href="{% url 'user:logout' %}">退出登录</a></li>
                    </ul>
                </div>
            {% else %}
                <div>
                    <i class="PyWhich py-user"></i>
                    <span>
                    <a href="{% url 'user:login' %}" class="login">登录</a> / <a href="{% url 'user:register' %}"
                                                                             class="reg">注册</a>
              </span>
                </div>
            {% endif %}
      </div>
    <!-- login end -->
  </div>
</header>

{% endblock header %}
{% block main_start %}
        <main id="main">
        <div class="w1200">
            <div class="course-contain">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    a:hover {color: red; text-decoration:underline;}
    p{
        margin-left: 10px;

    }

#course-video {
	position: absolute;
	left: 180px;
	top: 128px;
	width: 1629px;
	height: 893px;
	{#z-index: 1;#}
	{#background-color: #99FFFF;#}
}
#apDiv2 {
	position: absolute;
	left: 1372px;
	top: 70px;
	width: 278px;
	height: 70px;
	{#z-index: 2;#}
	background-color: #a6a3a9;
     border-radius: 10px;
}
#apDiv3 {
	position: absolute;
	left: 1763px;
	top: 70px;
	width: 110px;
	height: 25px;
	{#z-index: 3;#}
	background-color: #fff92c;

}
#apDiv4 {
	position: absolute;
	left: 1377px;
	top: 145px;
	width: 269px;
	height: 582px;
	{#z-index: 4;#}
	background-color: #a6a3a9;
    border-radius: 10px;
}
#apDiv5 {
	position: absolute;
	left: 613px;
	top: 701px;
	width: 50px;
	height: 31px;
	{#z-index: 5;#}
	background-color: #99FFFF;
}
    #apDiv6 {
	position: relative;
	left: 10px;
	top: 501px;
	width: 1019px;
	height: 69px;
	z-index: 6;
        {#background-color: #99FFFF;#}
}
.test1{
    position: relative;
    width: 50px;
    height: 50px;
    {#float: left;#}
    display: inline;
}
{#li{#}
{#    float:left;#}
{#}#}

#apDiv7 {
	position: absolute;
	left: 153px;
	top: 597px;
	width: 59px;
	height: 44px;
	z-index: 7;
    {#background-color: #3635ff;#}
}
</style>
</head>

<body>


<div
        style="position: absolute;
        left: 180px;
        top: 128px;
        width: 700px;
        height: 600px;
        {#z-index: 7;#}
	background-image: url({% static  '背景图.png'%});"
        class="course-video" id="course-video">
{#    <div id="playercontainer"></div>#}
    <span class="course-data" style="display: none" data-video-url="{{ course.video_url }}"
                          data-cover-url="{{ course.cover_url }}"></span>
</div>

    <div id="apDiv2">
        {% for obj in courses %}
            <p>&nbsp; </p>
        <p>课件包名称</p>
            <p>&nbsp; </p>
        <p style="font-size: large;font-weight: bold">{{ obj.category }}</p>
    </div>
    <div style="border-radius: 50px" id="apDiv3">
        <a style="margin: 0" href="{% url "course:index" %}">返回上级界面</a>
    </div>
<div id="apDiv4">

    <ul>
{#        <li>{{ obj.category }}#}
        <li>
            <ul>

                    {% for obj in course_lesson %}
                      <li>
                      <h1></h1>
                          <p>&nbsp; </p>
                          <li style="font-size: large" class="lessonname" data-id={{ obj.id }} data-url={{ obj__course}}>&emsp;{{ obj }}</li>
                            {% if obj.children.all %}
                            {% for child in obj.children.all %}
                            <li class="play" data-url="{{ child.video_url }}">&emsp;
                                <a >
                                    {% if child.is_pass %}
                                    &emsp;{{ child }}
                                    {% endif %}
                                </a>
                            </li>
                            {% endfor %}
                        {% endif %}




                    {% endfor %}



            </ul>
        </li>
    </ul>
{#    <ul>回溯策略#}
{#        <li>课件视频</li>#}
{#        <li>讲课示范</li>#}
{#        <li>课件说明</li>#}
{#    </ul>#}
{#    <ul>图搜索策略#}
{#        <li>课件视频</li>#}
{#        <li>讲课示范</li>#}
{#        <li>课件说明</li>#}
{#    </ul>#}
    {% endfor %}

</div>
{#    <div id="apDiv5">上课</div>#}
    <div id="apDiv6">
        <ul class="test1">

            {% for course in courses %}


                <li class="test1" >
{#                <a class="test1" href="{% url 'course:course_detail' category.id %}">{{ course.title }}</a>#}
                <a class="test2" style="display: none" href="#" data-video-url="{{ course.video_url }}">{{ course.title }}
{#                    <div class="course-video" id="course-video">#}
{##}
{#                    <span class="course-data" style="display: none" data-video-url="{{ course.video_url }}"#}
{#                          data-cover-url="{{ course.cover_url }}"></span>#}
{#                    </div>#}
                <img class="test1" src="{{ course.cover_url }}" alt="{{ course.title }}">
                </a>
                </li>
            {% endfor %}
        </ul>
    </div>

{#    <div id="apDiv7">#}
{#        <main id="course-container">#}
{#        <div class="w1200">#}
{#            <ul class="course-list">#}
{#                {% for course in courses %}#}
{#                <li class="course-item">#}
{#                    <a href="{% url 'course:course_detail' course.id %}">#}
{#                    <h1>aa</h1>#}
{#                        <img class="course-img" src="{{ course.cover_url }}"#}
{#                             alt="{{ course.title }}">#}
{#                        <div class="course-content">#}
{#                            <p class="course-info">{{ course.title }}</p>#}
{#                            <p class="course-author">{{ course.teacher.name }}({{ course.teacher.title }})</p>#}
{#                            <p class="course-price free">免费</p>#}
{#                        </div>#}
{#                    </a>#}
{#                </li>#}
{#                {% endfor %}#}
{#            </ul>#}
{#        </div>#}
{#    </main>#}
{#    </div>#}

</body>
</html>
                </div>
            </div>
        </main>

{% endblock main_start %}
{% block script %}

{#    <script type="text/javascript" src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>#}
    <script src="{% static 'js/course/cyberplayer1.js' %}"></script>
    <script src="{% static 'js/course/course_detail1.js' %}"></script>
    <script src="{% static 'js/course/course_detail2.js' %}"></script>
    <script src="{% static 'js/course/course__play.js' %}"></script>
{% endblock %}